<template>
  <fieldset>
    <legend>三级联动</legend>
    省：{{sel1}}
    <select v-model="sel1" @change="provienceChange(sel1)">
      <option  v-for="item in provience" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    市：
    <select v-model="sel2">
      <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    区：
    <select v-model="sel3">
      <option v-for="item in ququ" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
  </fieldset>
</template>
<script>
import * as api from "@/api/select"
export default {
  data() {
    return {
      //省的数据
      provience: [],
      //市的数据
      citys:[],
      //区的数据
      ququ:[],
      sel1:1,//设置这个就能默认选中1  也是选中省的id
      sel2:"",
      sel3:""
    }
  },
  mounted() {
    api.fetchData()
      .then(res => {
        console.log(res)//拿到省的数据
        //filter是过滤  将parentId为0的数据赋值到数组中
        this.provience=res;
        //获取默认第一条的id
        let pid=res[0].id;
        this.provienceChange(pid)
      })

      api.fetchCity(2)
      .then(res=>{
        console.log(res)//拿到的市的数据
      })

    
  },
  methods:{
    provienceChange(pid){
      //选择的省变化的时候，获取选择的省对应的id，发起请求，请求市的数据
      api.fetchCity(pid)
      .then(res=>{
        console.log(res)//这个res就是拿到的市的数据
        this.citys=res;//把请求到的市的数据赋值给citys数组
        
        if(res.length>0){//判断市里面必须有内容 不然就会报错
          this.sel2=res[0].id//默认为市里面的第一条id 来展示
        }
      })
    },
    
  }
}
</script>





<style scoped>
select {
  width: 100px;
}
</style>